<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
            name="viewport">

        <title>K线图</title>
        <link rel="stylesheet" href="./kline.css">
        <script src="./jquery.min.js"></script>
        <script src="./kline.min.js"></script>
    </head>

<body>


    <div data-v-3cac0174="" class="m-quotation-hd">
        <span data-v-3cac0174="" class="btn-back btn-back1"></span>
        <span data-v-3cac0174="" class="title titletype"></span>

        <div data-v-3cac0174="" class="m-statistics">
            <div data-v-3cac0174="" class="m-statistics-left"><span data-v-3cac0174="" class="price">
                    <strong style="font-weight: normal"></strong>
                    <span data-v-3cac0174="" class="exchangeRatecny">≈ CNY</span></span> <span data-v-3cac0174=""
                    class="exchangeRate exchangeRatel">量<b data-v-3cac0174=""></b></span> <span data-v-3cac0174=""
                    class="twentyFourHourChg">
                </span> </div>
            <div data-v-3cac0174="" class="m-statistics-right">
                <div data-v-3cac0174="" class="m-statistics-item"><span data-v-3cac0174=""
                        class="m-statistics-label">高</span> <span data-v-3cac0174=""
                        class="m-statistics-value m-statistics-value1"></span></div>
                <div data-v-3cac0174="" class="m-statistics-item"><span data-v-3cac0174=""
                        class="m-statistics-label">低</span> <span data-v-3cac0174=""
                        class="m-statistics-value m-statistics-value2"></span></div>
            </div>
        </div>
    </div>
    <div class="kwire">
        <!-- K线图 -->
        <div id="kline_container"></div>
        <!-- 弹窗 -->
        <div class="m-moreKlineOperation">
            <div class="m-moreKlineOperation-mask"></div>
            <ul class="operation-list">
                <li class="">1小时</li>
                <li class="">4小时</li>
                <li class="">1天</li>
                <li class="">1周</li>
            </ul>
        </div>
    </div>

    <div class="handicap">
        <div data-v-3cac0174="" class="m-tabData-item">
            <div data-v-3cac0174="" class="m-currentPriceList">
                <div class="m-currentPrice-hd"><span class="type">买盘</span> <span
                        class="number alignRight typemoney"></span> <span class="price">价格(USDT)</span> <span
                        class="number typemoney"></span> <span class="type">卖盘</span></div>
                <div class="m-currentPrice-bd">
                    <div class="m-currentPrice-buy"></div>
                    <div class="m-currentPrice-sell"></div>
                </div>
            </div>
            <div data-v-3cac0174="" class="m-dealList">
                <div class="m-dealList-title">成交明细</div>
                <div class="m-dealList-hd"><span class="w20">时间</span> <span class="w10">方向</span> <span
                        class="w35">价格</span> <span class="w35">数量</span></div>
                <div class="m-dealList-bd">

                </div>
            </div>
        </div>
    </div>

    <div class="synopsis">
        <div data-v-3cac0174="" class="m-tabData-item introduction">
            <div data-v-720f4a4c="" data-v-3cac0174="" class="m-coinIntroduction">

                </div>
            </div>
        </div>
    </div>


    <div data-v-3cac0174="" class="m-quotation-ft"><span data-v-3cac0174="" class="btn-kline active"
            style="margin-left: 1.2rem;">K线<b class="quotib"></b></span> <span data-v-3cac0174="" class="btn-rank">盘口<b
                class="quotib"></b></span> <span data-v-3cac0174="" class="btn-introduction"
            style="width: 14%;">简介</span>
        <span data-v-3cac0174="" class="btn-trade">去交易</span></div>




    <script>
        var scrollHeight =
            document.documentElement.scrollHeight || document.body.scrollHeight;
        var heightbox = scrollHeight - 150;
        var locationurl = location.search;

        if (location.search) {
            var tile = location.search.split("=")[1];
            $(".titletype").text(tile.split("_")[0] + "/USDT");
            $(".typemoney").text("数量("+tile.split("_")[0]+")");
        }

        var api = "";
        //打包删除
        // api="http://xhlwt.eduxy.cn";
        // api = "http://localhost:80"

        let kline = new Kline({
            element: "#kline_container",
            width: $(window).width(),
            height: heightbox + 10,
            // theme: '#121b31', // light/dark
            language: 'zh-cn', // zh-cn/en-us/zh-tw
            ranges: ["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"],
            symbol: "ETH",
            symbolName: "USDT",
            type: "poll", // poll/socket
            url: "/index/apihq/getticker" + locationurl,
            // /zc/mock.json
            limit: 1000,
            intervalTime: 60000,
            debug: false,
            showTrade: false,
            reverseColor: true,
        });
        kline.draw();


        $(".btn-back1").click(function () {
            window.history.back(-1);
        })


        $(".m-tabData-item,.m-tabData-item.introduction").css({ height: heightbox - 16 });

        // $("#chart_toolbar").html(`
        // <div class="m-klineOperation"><div class="btn-wrap"><span class="btn-operation btn-operation1">分时</span> <span class="btn-operation btn-operation1">1分</span> <span class="btn-operation btn-operation1">5分</span> <span class="btn-operation btn-operation1">15分</span> <span class="btn-operation btn-operation1">30分</span> <span class="btn-operation more-operation active12">更多</span></div></div>
        // `)
        $("#chart_toolbar").css({ display: 'none' });

        //底部切换
        $(".m-quotation-ft .btn-kline,.m-quotation-ft .btn-rank,.m-quotation-ft .btn-introduction").click(function () {
            console.log($(this).text());
            $(this).addClass("active").siblings().removeClass("active");
            $(".kwire,.handicap,.synopsis").hide();
            var value = $(this).text();
            switch (value) {
                case "K线":
                    $(".kwire").show();
                    $(".m-quotation-hd").css({ paddingBottom: "0" });
                    break;
                case "盘口":
                    detail();
                    $(".handicap").show();
                    $(".m-quotation-hd").css({ paddingBottom: "0" });
                    break;
                case "简介":
                    $(".synopsis").show();
                    $(".m-quotation-hd").css({ paddingBottom: ".6rem" });
                    break;
            }
        })






        //盘口
        function detail() {
            $.ajax({
                type: "post",
                url: api + "/index/buy/newoverorder",
                data:{bidui:location.search.split("=")[1]},
                success(data) {
                    $(".m-dealList-bd").html("");
                    for (var i = 0; i < data.info.length; i++) {
                        var shu = data.info[i];
                        if (shu.type == 2) {
                            $(".m-dealList-bd").append(`
                                <div class="m-dealList-item down"><span class="w20">${shu.finishtime}</span> <span class="w10 sell">卖出</span>
                                    <span class="w35">${shu.price}</span> <span class="w35">${shu.allnumber}</span>
                                </div>
                            `)
                        } else {
                            $(".m-dealList-bd").append(`
                                <div class="m-dealList-item down"><span class="w20">${shu.finishtime}</span> <span class="w10 buy">买入</span>
                                    <span class="w35">${shu.price}</span> <span class="w35">${shu.allnumber}</span>
                                </div>
                            `)
                        }

                    }
                }
            });

            $.ajax({
                type: "post",
                url: api + "/index/apihq/gethistory",
                data: {
                    bidui: locationurl.split("bidui=")[1]
                },
                success(data) {
                    var das = data.ratio;
                    var trun=String(data.cny);
                    var valuecny="";
                    trun.indexOf(".")!=-1?valuecny=trun.substring(0,trun.indexOf(".")+3):
                    valuecny=trun;
                    var trun1="";
                    String(das.last).indexOf(".")!=-1?trun1=String(das.last).substring(0,String(das.last).indexOf(".")+3):String
                    trun1=das.last;
                    $(".exchangeRatecny").text(` ≈${valuecny}CNY`);
                    $(".exchangeRatel b").text(das.baseVolume);
                    $(".m-statistics-left strong").text(trun1);
                    $(".m-statistics-left .twentyFourHourChg").text(das.percentChange+"%");
                    $(".m-statistics-value1").text(das.high24hr);
                    $(".m-statistics-value2").text(das.low24hr);

                    var buy = [], sell = [];
                    for (var i = 0; i < data.list.length; i++) {
                        var ds = data.list[i];
                        if (ds.type == "buy" && buy.length < 20) {
                            buy.push(ds);
                        } else if (ds.type == "sell" && sell.length < 20) {
                            sell.push(ds);
                        }
                    };
                    $(".m-currentPrice-buy").html("");
                    $(".m-currentPrice-sell").html("");
                    for (var i = 0; i < buy.length; i++) {
                        var result ="";
                        buy[i].amount.indexOf(".")!=-1?result = buy[i].amount.substring(0,buy[i].amount.indexOf(".")+4):
                        result = buy[i].amount;
                        $(".m-currentPrice-buy").append(`
                        <div class="m-currentPrice-item"><span class="index">${i + 1}</span> <span
                            class="amount">${result}</span> <span class="price alignRight">${buy[i].rate}</span> <span
                            class="numberRatio" style="width: 100%;"></span>
                        </div>
                        `)
                    };
                    for (var i = 0; i < sell.length; i++) {
                        var result = "";
                        sell[i].amount.indexOf(".")!=-1?result = sell[i].amount.substring(0,sell[i].amount.indexOf(".")+4):
                        result = sell[i].amount;
                        $(".m-currentPrice-sell").append(`
                        <div class="m-currentPrice-item"><span class="price">${sell[i].rate}</span> <span
                            class="amount">${result}</span> <span class="index">${i + 1}</span> <span class="numberRatio"
                            style="width: 0.0159642%;"></span>
                        </div>
                        `)
                    }
                }
            });

        };
        detail();


        var synopsiss=locationurl.split("bidui=")[1];
        $.ajax({
            type:"post",
            url: api + "/index/usercenter/contents",
            data:{
                type:synopsiss.split("_")[0]
            },
            success(data){
                console.log(data,' synosis');
                var ds=data.info;
                $(".m-coinIntroduction").html(ds.content);
            }
        })


    </script>
</body>

</html>